<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    

    
    <title>前端开发者必备的nginx知识 | 李世奇的技术专栏</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
        <meta name="keywords" content="nginx" />
    
    <meta name="description" content="nginx在应用程序中的作用 解决跨域 请求过滤 配置gzip 负载均衡 静态资源服务器   nginx是一个高性能的HTTP和反向代理服务器，也是一个通用的TCP/UDP代理服务器，最初由俄罗斯人Igor Sysoev编写。  nginx现在几乎是众多大型网站的必用技术，大多数情况下，我们不需要亲自去配置它，但是了解它在应用程序中所担任的角色，以及如何解决这些问题是非常必要的。 下面我将从ng">
<meta name="keywords" content="nginx">
<meta property="og:type" content="article">
<meta property="og:title" content="前端开发者必备的nginx知识">
<meta property="og:url" content="https://www.lisq.xyz/2019/03/12/【前端工程】前端开发者必备的nginx知识/index.html">
<meta property="og:site_name" content="李世奇的技术专栏">
<meta property="og:description" content="nginx在应用程序中的作用 解决跨域 请求过滤 配置gzip 负载均衡 静态资源服务器   nginx是一个高性能的HTTP和反向代理服务器，也是一个通用的TCP/UDP代理服务器，最初由俄罗斯人Igor Sysoev编写。  nginx现在几乎是众多大型网站的必用技术，大多数情况下，我们不需要亲自去配置它，但是了解它在应用程序中所担任的角色，以及如何解决这些问题是非常必要的。 下面我将从ng">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://www.lisq.xyz/img/nginx.jpg">
<meta property="og:updated_time" content="2019-04-06T05:25:56.565Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端开发者必备的nginx知识">
<meta name="twitter:description" content="nginx在应用程序中的作用 解决跨域 请求过滤 配置gzip 负载均衡 静态资源服务器   nginx是一个高性能的HTTP和反向代理服务器，也是一个通用的TCP/UDP代理服务器，最初由俄罗斯人Igor Sysoev编写。  nginx现在几乎是众多大型网站的必用技术，大多数情况下，我们不需要亲自去配置它，但是了解它在应用程序中所担任的角色，以及如何解决这些问题是非常必要的。 下面我将从ng">
<meta name="twitter:image" content="https://www.lisq.xyz/img/nginx.jpg">
    

    

    

    <link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/libs/titillium-web/styles.css">
    <link rel="stylesheet" href="/libs/source-code-pro/styles.css">

    <link rel="stylesheet" href="/css/style.css">

    <script src="/libs/jquery/3.3.1/jquery.min.js"></script>
    
    
        <link rel="stylesheet" href="/libs/lightgallery/css/lightgallery.min.css">
    
    
        <link rel="stylesheet" href="/libs/justified-gallery/justifiedGallery.min.css">
    
    
    


</head>


<body>
    <div id="wrap">
        <header id="header">
    <div id="header-outer" class="outer">
        <div class="container">
            <div class="container-inner">
                <div id="header-title">
                    <h1 class="logo-wrap">
                        <a href="/" class="logo"></a>
                    </h1>
                    
                </div>
                <div id="header-inner" class="nav-container">
                    <a id="main-nav-toggle" class="nav-icon fa fa-bars"></a>
                    <div class="nav-container-inner">
                        <ul id="main-nav">
                            
                                <li class="main-nav-list-item" >
                                    <a class="main-nav-list-link" href="/">主页</a>
                                </li>
                            
                                        
                                    
                                <li class="main-nav-list-item" >
                                    <a class="main-nav-list-link" href="https://mp.weixin.qq.com/s/dYZEHTgqvxGV7mL99JuxRQ">关于</a>
                                </li>
                            
                                <li class="main-nav-list-item" >
                                    <a class="main-nav-list-link" href="https://github.com/ConardLi/ConardLi.github.io">更新日志</a>
                                </li>
                            
                                <li class="main-nav-list-item" >
                                    <a class="main-nav-list-link" href="/me/navigation.html">index.导航</a>
                                </li>
                            
                        </ul>
                        <nav id="sub-nav">
                            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/js/insight.js"></script>

</div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
        <div class="container">
            <div class="main-body container-inner">
                <div class="main-body-inner">
                    <section id="main">
                        <div class="main-body-header">
    <h1 class="header">
    
    未分类
    </h1>
</div>

                        <div class="main-body-content">
                            <style>
    #article-toc.fixed {
        position: fixed;
        top: 30px;
        bottom: 30px;
        left: 32px;
        padding-top: 15px;
        z-index: 9999;
        background-color: antiquewhite;
        width: 200px;
        padding-left: 20px;
        padding-bottom: 30px;
        border-radius: 10px;
        border: 1px solid rgb(122, 122, 122);
        opacity: 0.8;
    }

    #article-toc-inner {
        padding: 10px;
        width: 200px;
        height: 100%;
        overflow: auto;
    }

    .toc-level-3 {
        margin-left: 20px;
    }

    #article-toc a {
        text-decoration: none;
        color: #333;
        padding: 3px 0;
        color: #000;
        font-weight: normal;
    }

    .toc-item {
        line-height: 30px;
        list-style-type: initial;
    }

    #tocbtn {
        position: fixed;
        top: 30%;
        left: 0px;
        padding: 5px 2px;
        width: 18px;
        word-wrap: break-word;
        background-color: rgb(242, 245, 247);
        box-shadow: rgba(118, 118, 118, 0.11) 2px 0px 5px 0px;
        opacity: 1;
        height: 94px;
        line-height: 16px;
        text-align: center;
        top: 33%;
        width: 30px;
        z-index: 1000000001;
        cursor: pointer;
        border-radius: 0px 4px 4px 0px;
        border-width: 1px 1px 1px;
        border-style: solid solid solid none;
        border-color: rgb(224, 228, 231) rgb(224, 228, 231) rgb(224, 228, 231);
        border-image: initial;
        border-left: none;
        padding: 6px;
        transition: right 0.4s ease-in 0.3s, opacity 0.5s ease-in 0.3s;
    }
</style>

<article id="post-【前端工程】前端开发者必备的nginx知识"
    class="article article-single article-type-post"
    itemscope itemprop="blogPost">
    <div class="article-inner">
        
        <header class="article-header">
            
    
        <h1 class="article-title" itemprop="name">
        前端开发者必备的nginx知识
        </h1>
    

        </header>
        
        
        <div class="article-meta">
            
    <div class="article-date">
        <a href="/2019/03/12/【前端工程】前端开发者必备的nginx知识/" class="article-date">
            <time datetime="2019-03-12T06:50:35.000Z" itemprop="datePublished">2019-03-12</time>
        </a>
    </div>

            

            
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/tags/nginx/">nginx</a>
    </div>

            <span id="busuanzi_container_page_pv" style="position: relative;float: right;">
                本文总阅读量<span id="busuanzi_value_page_pv"></span>次
            </span>
        </div>
        
        
        <div class="article-entry" itemprop="articleBody">
            <p><img src="/img/nginx.jpg" alt="image"></p>
<h2 id="nginx在应用程序中的作用"><a href="#nginx在应用程序中的作用" class="headerlink" title="nginx在应用程序中的作用"></a>nginx在应用程序中的作用</h2><ul>
<li>解决跨域</li>
<li>请求过滤</li>
<li>配置gzip</li>
<li>负载均衡</li>
<li>静态资源服务器</li>
</ul>
<blockquote>
<p>nginx是一个高性能的HTTP和反向代理服务器，也是一个通用的TCP/UDP代理服务器，最初由俄罗斯人Igor Sysoev编写。</p>
</blockquote>
<p>nginx现在几乎是众多大型网站的必用技术，大多数情况下，我们不需要亲自去配置它，但是了解它在应用程序中所担任的角色，以及如何解决这些问题是非常必要的。</p>
<p>下面我将从nginx在企业中的真实应用来解释nginx在应用程序中起到的作用。</p>
<p>为了便于理解，首先先来了解一下一些基础知识，<code>nginx是一个高性能的反向代理服务器</code>那么什么是反向代理呢？</p>
<h2 id="正向代理与反向代理"><a href="#正向代理与反向代理" class="headerlink" title="正向代理与反向代理"></a>正向代理与反向代理</h2><p><strong>代理</strong>是在服务器和客户端之间假设的一层服务器，<strong>代理</strong>将接收客户端的请求并将它转发给服务器，然后将服务端的响应转发给客户端。</p>
<p>不管是正向代理还是反向代理，实现的都是上面的功能。</p>
<p><img src="https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/nginx2.png" alt="image"></p>
<h4 id="正向代理"><a href="#正向代理" class="headerlink" title="正向代理"></a>正向代理</h4><blockquote>
<p><strong>正向代理</strong>，意思是一个位于客户端和原始服务器(origin server)之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。</p>
</blockquote>
<p><strong>正向代理</strong>是为我们服务的，即为客户端服务的，客户端可以根据正向代理访问到它本身无法访问到的服务器资源。</p>
<p><strong>正向代理</strong>对我们是透明的，对服务端是非透明的，即服务端并不知道自己收到的是来自代理的访问还是来自真实客户端的访问。</p>
<h4 id="反向代理"><a href="#反向代理" class="headerlink" title="反向代理"></a>反向代理</h4><blockquote>
<p><strong> 反向代理</strong>（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。</p>
</blockquote>
<p><strong>反向代理</strong>是为服务端服务的，反向代理可以帮助服务器接收来自客户端的请求，帮助服务器做请求转发，负载均衡等。</p>
<p><strong>反向代理</strong>对服务端是透明的，对我们是非透明的，即我们并不知道自己访问的是代理服务器，而服务器知道反向代理在为他服务。</p>
<h2 id="基本配置"><a href="#基本配置" class="headerlink" title="基本配置"></a>基本配置</h2><h4 id="配置结构"><a href="#配置结构" class="headerlink" title="配置结构"></a>配置结构</h4><p>下面是一个nginx配置文件的基本结构：</p>
<p><img src="https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/nginx1.png" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">events &#123; </span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">http </span><br><span class="line">&#123;</span><br><span class="line">    server</span><br><span class="line">    &#123; </span><br><span class="line">        location path</span><br><span class="line">        &#123;</span><br><span class="line">            ...</span><br><span class="line">        &#125;</span><br><span class="line">        location path</span><br><span class="line">        &#123;</span><br><span class="line">            ...</span><br><span class="line">        &#125;</span><br><span class="line">     &#125;</span><br><span class="line"></span><br><span class="line">    server</span><br><span class="line">    &#123;</span><br><span class="line">        ...</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><code>main</code>:nginx的全局配置，对全局生效。</li>
<li><code>events</code>:配置影响nginx服务器或与用户的网络连接。</li>
<li><code>http</code>：可以嵌套多个server，配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置。</li>
<li><code>server</code>：配置虚拟主机的相关参数，一个http中可以有多个server。</li>
<li><code>location</code>：配置请求的路由，以及各种页面的处理情况。</li>
<li><code>upstream</code>：配置后端服务器具体地址，负载均衡配置不可或缺的部分。</li>
</ul>
<h4 id="内置变量"><a href="#内置变量" class="headerlink" title="内置变量"></a>内置变量</h4><p>下面是<code>nginx</code>一些配置中常用的内置全局变量，你可以在配置的任何位置使用它们。</p>
<table>
<thead>
<tr>
<th>变量名</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$host</code></td>
<td>请求信息中的<code>Host</code>，如果请求中没有<code>Host</code>行，则等于设置的服务器名</td>
</tr>
<tr>
<td><code>$request_method</code></td>
<td>客户端请求类型，如<code>GET</code>、<code>POST</code></td>
</tr>
<tr>
<td><code>$remote_addr</code></td>
<td>客户端的<code>IP</code>地址</td>
</tr>
<tr>
<td><code>$args</code></td>
<td>请求中的参数</td>
</tr>
<tr>
<td><code>$content_length</code></td>
<td>请求头中的<code>Content-length</code>字段</td>
</tr>
<tr>
<td><code>$http_user_agent</code></td>
<td>客户端agent信息</td>
</tr>
<tr>
<td><code>$http_cookie</code></td>
<td>客户端cookie信息</td>
</tr>
<tr>
<td><code>$remote_addr</code></td>
<td>客户端的IP地址</td>
</tr>
<tr>
<td><code>$remote_port</code></td>
<td>客户端的端口</td>
</tr>
<tr>
<td><code>$server_protocol</code></td>
<td>请求使用的协议，如<code>HTTP/1.0</code>、·HTTP/1.1`</td>
</tr>
<tr>
<td><code>$server_addr</code></td>
<td>服务器地址</td>
</tr>
<tr>
<td><code>$server_name</code></td>
<td>服务器名称</td>
</tr>
<tr>
<td><code>$server_port</code></td>
<td>服务器的端口号</td>
</tr>
</tbody>
</table>
<h2 id="解决跨域"><a href="#解决跨域" class="headerlink" title="解决跨域"></a>解决跨域</h2><p>先追本溯源以下，跨域究竟是怎么回事。</p>
<h4 id="跨域的定义"><a href="#跨域的定义" class="headerlink" title="跨域的定义"></a>跨域的定义</h4><p>同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。</p>
<h4 id="同源的定义"><a href="#同源的定义" class="headerlink" title="同源的定义"></a>同源的定义</h4><p>如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。</p>
<p><img src="https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/tongyuan.png" alt="image"></p>
<h4 id="nginx解决跨域的原理"><a href="#nginx解决跨域的原理" class="headerlink" title="nginx解决跨域的原理"></a>nginx解决跨域的原理</h4><p>例如：</p>
<ul>
<li>前端server的域名为：<code>fe.server.com</code></li>
<li>后端服务的域名为：<code>dev.server.com</code></li>
</ul>
<p>现在我在<code>fe.server.com</code>对<code>dev.server.com</code>发起请求一定会出现跨域。</p>
<p>现在我们只需要启动一个nginx服务器，将<code>server_name</code>设置为<code>fe.server.com</code>,然后设置相应的location以拦截前端需要跨域的请求，最后将请求代理回<code>dev.server.com</code>。如下面的配置：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">server &#123;</span><br><span class="line">        listen       80;</span><br><span class="line">        server_name  fe.server.com;</span><br><span class="line">        location / &#123;</span><br><span class="line">                proxy_pass dev.server.com;</span><br><span class="line">        &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>这样可以完美绕过浏览器的同源策略：<code>fe.server.com</code>访问<code>nginx</code>的<code>fe.server.com</code>属于同源访问，而<code>nginx</code>对服务端转发的请求不会触发浏览器的同源策略。</p>
<h2 id="请求过滤"><a href="#请求过滤" class="headerlink" title="请求过滤"></a>请求过滤</h2><p><img src="https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/404.jpg" alt="image"></p>
<p>根据状态码过滤<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">error_page 500 501 502 503 504 506 /50x.html;</span><br><span class="line">    location = /50x.html &#123;</span><br><span class="line">        #将跟路径改编为存放html的路径。</span><br><span class="line">        root /root/static/html;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure></p>
<p>根据URL名称过滤，精准匹配URL，不匹配的URL全部重定向到主页。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">location / &#123;</span><br><span class="line">    rewrite  ^.*$ /index.html  redirect;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>根据请求类型过滤。<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">if ( $request_method !~ ^(GET|POST|HEAD)$ ) &#123;</span><br><span class="line">        return 403;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure></p>
<h2 id="配置gzip"><a href="#配置gzip" class="headerlink" title="配置gzip"></a>配置gzip</h2><p><img src="https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/gzip.jpg" alt="image"></p>
<p><code>GZIP</code>是规定的三种标准HTTP压缩格式之一。目前绝大多数的网站都在使用<code>GZIP</code>传输 <code>HTML</code>、<code>CSS</code>、<code>JavaScript</code> 等资源文件。</p>
<p>对于文本文件，<code>GZip</code> 的效果非常明显，开启后传输所需流量大约会降至 <code>1/4 ~ 1/3</code>。</p>
<p>并不是每个浏览器都支持<code>gzip</code>的，如何知道客户端是否支持<code>gzip</code>呢，请求头中的<code>Accept-Encoding</code>来标识对压缩的支持。</p>
<p><img src="https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/gzip1.png" alt="image"></p>
<p>启用<code>gzip</code>同时需要客户端和服务端的支持，如果客户端支持<code>gzip</code>的解析，那么只要服务端能够返回<code>gzip</code>的文件就可以启用<code>gzip</code>了,我们可以通过<code>nginx</code>的配置来让服务端支持<code>gzip</code>。下面的<code>respone</code>中<code>content-encoding:gzip</code>，指服务端开启了<code>gzip</code>的压缩方式。</p>
<p><img src="https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/gzip2.png" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">gzip                    on;</span><br><span class="line">gzip_http_version       1.1;        </span><br><span class="line">gzip_comp_level         5;</span><br><span class="line">gzip_min_length         1000;</span><br><span class="line">gzip_types text/csv text/xml text/css text/plain text/javascript application/javascript application/x-javascript application/json application/xml;</span><br></pre></td></tr></table></figure>
<h4 id="gzip"><a href="#gzip" class="headerlink" title="gzip"></a>gzip</h4><ul>
<li>开启或者关闭<code>gzip</code>模块</li>
<li>默认值为<code>off</code></li>
<li>可配置为<code>on / off</code></li>
</ul>
<h4 id="gzip-http-version"><a href="#gzip-http-version" class="headerlink" title="gzip_http_version"></a>gzip_http_version</h4><ul>
<li>启用 <code>GZip</code> 所需的<code>HTTP</code> 最低版本</li>
<li>默认值为<code>HTTP/1.1</code></li>
</ul>
<p>这里为什么默认版本不是<code>1.0</code>呢？</p>
<p><code>HTTP</code> 运行在<code>TCP</code> 连接之上，自然也有着跟<code>TCP</code> 一样的三次握手、慢启动等特性。</p>
<p>启用持久连接情况下，服务器发出响应后让<code>TCP</code>连接继续打开着。同一对客户/服务器之间的后续请求和响应可以通过这个连接发送。</p>
<p><img src="https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/keepalive.png" alt="image"></p>
<p>为了尽可能的提高 <code>HTTP</code> 性能，使用持久连接就显得尤为重要了。</p>
<p><code>HTTP/1.1</code>默认支持<code>TCP</code>持久连接，<code>HTTP/1.0</code> 也可以通过显式指定 <code>Connection: keep-alive</code> 来启用持久连接。对于<code>TCP</code>持久连接上的<code>HTTP</code> 报文，客户端需要一种机制来准确判断结束位置，而在 <code>HTTP/1.0</code>中，这种机制只有<code>Content-Length</code>。而在<code>HTTP/1.1</code>中新增的 <code>Transfer-Encoding: chunked</code> 所对应的分块传输机制可以完美解决这类问题。</p>
<p><code>nginx</code>同样有着配置<code>chunked的</code>属性<code>chunked_transfer_encoding</code>，这个属性是默认开启的。</p>
<p><code>Nginx</code>在启用了<code>GZip</code>的情况下，不会等文件 <code>GZip</code> 完成再返回响应，而是边压缩边响应，这样可以显著提高 <code>TTFB</code>(<code>Time To First Byte</code>，首字节时间，WEB 性能优化重要指标)。这样唯一的问题是，<code>Nginx</code> 开始返回响应时，它无法知道将要传输的文件最终有多大，也就是无法给出<code>Content-Length</code>这个响应头部。</p>
<p>所以，在<code>HTTP1.0</code>中如果利用<code>Nginx</code>启用了<code>GZip</code>，是无法获得<code>Content-Length</code>的，这导致HTTP1.0中开启持久链接和使用<code>GZip</code>只能二选一，所以在这里<code>gzip_http_version</code>默认设置为<code>1.1</code>。</p>
<h4 id="gzip-comp-level"><a href="#gzip-comp-level" class="headerlink" title="gzip_comp_level"></a>gzip_comp_level</h4><ul>
<li>压缩级别，级别越高压缩率越大，当然压缩时间也就越长（传输快但比较消耗cpu）。</li>
<li>默认值为 <code>1</code></li>
<li>压缩级别取值为<code>1-9</code></li>
</ul>
<h4 id="gzip-min-length"><a href="#gzip-min-length" class="headerlink" title="gzip_min_length"></a>gzip_min_length</h4><ul>
<li>设置允许压缩的页面最小字节数，<code>Content-Length</code>小于该值的请求将不会被压缩</li>
<li>默认值:<code>0</code></li>
<li>当设置的值较小时，压缩后的长度可能比原文件大，建议设置<code>1000</code>以上</li>
</ul>
<h4 id="gzip-types"><a href="#gzip-types" class="headerlink" title="gzip_types"></a>gzip_types</h4><ul>
<li>要采用gzip压缩的文件类型(<code>MIME</code>类型)</li>
<li>默认值:<code>text/html</code>(默认不压缩<code>js</code>/<code>css</code>)</li>
</ul>
<h2 id="负载均衡"><a href="#负载均衡" class="headerlink" title="负载均衡"></a>负载均衡</h2><h4 id="什么是负载均衡"><a href="#什么是负载均衡" class="headerlink" title="什么是负载均衡"></a>什么是负载均衡</h4><p><img src="https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/nginx3.jpg" alt="image"></p>
<p>如上面的图，前面是众多的服务窗口，下面有很多用户需要服务，我们需要一个工具或策略来帮助我们将如此多的用户分配到每个窗口，来达到资源的充分利用以及更少的排队时间。</p>
<p>把前面的服务窗口想像成我们的后端服务器，而后面终端的人则是无数个客户端正在发起请求。负载均衡就是用来帮助我们将众多的客户端请求合理的分配到各个服务器，以达到服务端资源的充分利用和更少的请求时间。</p>
<h4 id="nginx如何实现负载均衡"><a href="#nginx如何实现负载均衡" class="headerlink" title="nginx如何实现负载均衡"></a>nginx如何实现负载均衡</h4><p>Upstream指定后端服务器地址列表</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">upstream balanceServer &#123;</span><br><span class="line">    server 10.1.22.33:12345;</span><br><span class="line">    server 10.1.22.34:12345;</span><br><span class="line">    server 10.1.22.35:12345;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>在server中拦截响应请求，并将请求转发到Upstream中配置的服务器列表。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">server &#123;</span><br><span class="line">    server_name  fe.server.com;</span><br><span class="line">    listen 80;</span><br><span class="line">    location /api &#123;</span><br><span class="line">        proxy_pass http://balanceServer;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面的配置只是指定了nginx需要转发的服务端列表，并没有指定分配策略。</p>
<h4 id="nginx实现负载均衡的策略"><a href="#nginx实现负载均衡的策略" class="headerlink" title="nginx实现负载均衡的策略"></a>nginx实现负载均衡的策略</h4><p><img src="https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/loadBalancing.png" alt="image"></p>
<p><strong>轮询策略</strong></p>
<p>默认情况下采用的策略，将所有客户端请求轮询分配给服务端。这种策略是可以正常工作的，但是如果其中某一台服务器压力太大，出现延迟，会影响所有分配在这台服务器下的用户。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">upstream balanceServer &#123;</span><br><span class="line">    server 10.1.22.33:12345;</span><br><span class="line">    server 10.1.22.34:12345;</span><br><span class="line">    server 10.1.22.35:12345;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src="https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/nginx5.png" alt="image"></p>
<p><strong>最小连接数策略</strong></p>
<p>将请求优先分配给压力较小的服务器，它可以平衡每个队列的长度，并避免向压力大的服务器添加更多的请求。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">upstream balanceServer &#123;</span><br><span class="line">    least_conn;</span><br><span class="line">    server 10.1.22.33:12345;</span><br><span class="line">    server 10.1.22.34:12345;</span><br><span class="line">    server 10.1.22.35:12345;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src="https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/nginx4.png" alt="image"></p>
<p><strong>最快响应时间策略</strong></p>
<p>依赖于NGINX Plus，优先分配给响应时间最短的服务器。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">upstream balanceServer &#123;</span><br><span class="line">    fair;</span><br><span class="line">    server 10.1.22.33:12345;</span><br><span class="line">    server 10.1.22.34:12345;</span><br><span class="line">    server 10.1.22.35:12345;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>客户端ip绑定</strong></p>
<p>来自同一个ip的请求永远只分配一台服务器，有效解决了动态网页存在的session共享问题。<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">upstream balanceServer &#123;</span><br><span class="line">    ip_hash;</span><br><span class="line">    server 10.1.22.33:12345;</span><br><span class="line">    server 10.1.22.34:12345;</span><br><span class="line">    server 10.1.22.35:12345;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h2 id="静态资源服务器"><a href="#静态资源服务器" class="headerlink" title="静态资源服务器"></a>静态资源服务器</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">location ~* \.(png|gif|jpg|jpeg)$ &#123;</span><br><span class="line">    root    /root/static/;  </span><br><span class="line">    autoindex on;</span><br><span class="line">    access_log  off;</span><br><span class="line">    expires     10h;# 设置过期时间为10小时          </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>匹配以<code>png|gif|jpg|jpeg</code>为结尾的请求，并将请求转发到本地路径，<code>root</code>中指定的路径即nginx本地路径。同时也可以进行一些缓存的设置。</p>
<h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>nginx的功能非常强大，还有很多需要探索，上面的一些配置都是公司配置的真实应用（精简过了），如果您有什么意见或者建议，欢迎在下方留言…</p>

        </div>
        <footer class="article-footer">
            



    <a data-url="https://www.lisq.xyz/2019/03/12/【前端工程】前端开发者必备的nginx知识/" data-id="cjv0hxjye000dnh0dngb2zh33" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

        </footer>
    </div>
</article>


    <section id="comments">
    
        
    <div id="disqus_thread">
        <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>

    
    </section>





<div id="roott"></div>

<button id="tocbtn">打开目录</button>


<script>
    var showToc = false;
    document.getElementById('tocbtn').onclick = function () {
        if (showToc) {
            document.getElementById('roott').innerHTML = ''
            document.getElementById('tocbtn').innerHTML = '打开目录'
        } else {
            document.getElementById('roott').innerHTML = `<aside id="article-toc" role="navigation" class="fixed">
  <div id="article-toc-inner">
    <strong class="sidebar-title">
      目录</strong>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#nginx在应用程序中的作用"><span class="toc-text">nginx在应用程序中的作用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#正向代理与反向代理"><span class="toc-text">正向代理与反向代理</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#正向代理"><span class="toc-text">正向代理</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#反向代理"><span class="toc-text">反向代理</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#基本配置"><span class="toc-text">基本配置</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#配置结构"><span class="toc-text">配置结构</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#内置变量"><span class="toc-text">内置变量</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#解决跨域"><span class="toc-text">解决跨域</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#跨域的定义"><span class="toc-text">跨域的定义</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#同源的定义"><span class="toc-text">同源的定义</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#nginx解决跨域的原理"><span class="toc-text">nginx解决跨域的原理</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#请求过滤"><span class="toc-text">请求过滤</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#配置gzip"><span class="toc-text">配置gzip</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#gzip"><span class="toc-text">gzip</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#gzip-http-version"><span class="toc-text">gzip_http_version</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#gzip-comp-level"><span class="toc-text">gzip_comp_level</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#gzip-min-length"><span class="toc-text">gzip_min_length</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#gzip-types"><span class="toc-text">gzip_types</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#负载均衡"><span class="toc-text">负载均衡</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#什么是负载均衡"><span class="toc-text">什么是负载均衡</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#nginx如何实现负载均衡"><span class="toc-text">nginx如何实现负载均衡</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#nginx实现负载均衡的策略"><span class="toc-text">nginx实现负载均衡的策略</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#静态资源服务器"><span class="toc-text">静态资源服务器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#小结"><span class="toc-text">小结</span></a></li></ol>
  </div>
</aside>`
            document.getElementById('tocbtn').innerHTML = '关闭目录'
        }
        showToc = !showToc;
    }
</script>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<div id="vcomments" style="padding: 30px;"></div>
<script>
    new Valine({
        el: '#vcomments',
        appId: 's1xL54gwvPRsIy3ciItiPhyD-gzGzoHsz',
        appKey: 'CmP8stKpHUHtp5abbTxpqc4H'
    })
</script>
                        </div>
                    </section>
                    <aside id="sidebar">
    <a class="sidebar-toggle" title="Expand Sidebar"><i class="toggle icon"></i></a>
    <div class="sidebar-top">
        <p>
            关注我 :</p>
        <ul class="social-links">
            
            
            <li>
                <a class="social-tooltip" title="github" href="https://github.com/ConardLi"
                    target="_blank" rel="noopener">
                    <i class="icon fa fa-github"></i>
                </a>
            </li>
            
            
        </ul>
    </div>
    
    
<nav id="article-nav">
    
        <a href="/2019/03/28/【浏览器和网络】全面分析前端的网络请求方式/" id="article-nav-newer" class="article-nav-link-wrap">
        <strong class="article-nav-caption">下一篇</strong>
        <p class="article-nav-title">
        
            全面分析前端的网络请求方式
        
        </p>
        <i class="icon fa fa-chevron-right" id="icon-chevron-right"></i>
    </a>
    
    
        <a href="/2019/03/06/【JavaScript】深入分析前端小数计算问题/" id="article-nav-older" class="article-nav-link-wrap">
        <strong class="article-nav-caption">上一篇</strong>
        <p class="article-nav-title">深入分析前端小数计算问题</p>
        <i class="icon fa fa-chevron-left" id="icon-chevron-left"></i>
        </a>
    
</nav>

    
    <div class="widgets-container" style="background-color: #fff; border-right: 1px solid #e2e2e2;">
        
        
        
<div class="widget-wrap widget-list">
    <h3 class="widget-title">
        微信公众号
    </h3>
    <div class="widget">
        <img src="https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/gzh/qrcode.jpg" alt="">
    </div>
</div>

        
        

        
        
    <div class="widget-wrap">
        <h3 class="widget-title">最新文章</h3>
        <div class="widget">
            <ul id="recent-post" class="">
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/2019/04/26/【自检】前端知识清单/" class="thumbnail">
    
    
        <span style="background-image:url(https://lsqimg-1257917459.cos.ap-beijing.myqcloud.com/blog/知识体系.png)" alt="【自检】前端知识清单" class="thumbnail-image"></span>
    
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/2019/04/26/【自检】前端知识清单/" class="title">【自检】前端知识清单</a></p>
                            <p class="item-date"><time datetime="2019-04-26T01:11:22.000Z" itemprop="datePublished">2019-04-26</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/2019/04/17/【React深入】深入分析虚拟DOM的渲染原理和特性/" class="thumbnail">
    
    
        <span style="background-image:url(https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/react11.png)" alt="【React深入】深入分析虚拟DOM的渲染原理和特性" class="thumbnail-image"></span>
    
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/2019/04/17/【React深入】深入分析虚拟DOM的渲染原理和特性/" class="title">【React深入】深入分析虚拟DOM的渲染原理和特性</a></p>
                            <p class="item-date"><time datetime="2019-04-17T03:15:27.000Z" itemprop="datePublished">2019-04-17</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/2019/04/09/【React深入】从Mixin到HOC再到Hook/" class="thumbnail">
    
    
        <span style="background-image:url(https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/hoc9.png)" alt="【React深入】从Mixin到HOC再到Hook" class="thumbnail-image"></span>
    
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/2019/04/09/【React深入】从Mixin到HOC再到Hook/" class="title">【React深入】从Mixin到HOC再到Hook</a></p>
                            <p class="item-date"><time datetime="2019-04-09T15:27:27.000Z" itemprop="datePublished">2019-04-09</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/2019/03/28/【浏览器和网络】全面分析前端的网络请求方式/" class="thumbnail">
    
    
        <span style="background-image:url(/img/network.jpg)" alt="全面分析前端的网络请求方式" class="thumbnail-image"></span>
    
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/2019/03/28/【浏览器和网络】全面分析前端的网络请求方式/" class="title">全面分析前端的网络请求方式</a></p>
                            <p class="item-date"><time datetime="2019-03-28T12:38:59.000Z" itemprop="datePublished">2019-03-28</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/2019/03/12/【前端工程】前端开发者必备的nginx知识/" class="thumbnail">
    
    
        <span style="background-image:url(/img/nginx.jpg)" alt="前端开发者必备的nginx知识" class="thumbnail-image"></span>
    
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/2019/03/12/【前端工程】前端开发者必备的nginx知识/" class="title">前端开发者必备的nginx知识</a></p>
                            <p class="item-date"><time datetime="2019-03-12T06:50:35.000Z" itemprop="datePublished">2019-03-12</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>

        
        
<div class="widget-wrap widget-list">
    <div class="">
        <h3 class="widget-title">标签</h3>
        <div class="widget widget-wrap-inn">
            <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/学习提升/">-学习提升</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/">JavaScript</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/electron/">electron</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nginx/">nginx</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/博客搭建/">博客搭建</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能优化/">性能优化</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/浏览器和网络/">浏览器和网络</a><span class="tag-list-count">1</span></li></ul>
        </div>
    </div>
</div>


<style>
    .widget-wrap-inn {
        background-color: white;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ddd;
    }
</style>
        
        
<div class="widget-wrap widget-list">
    <h3 class="widget-title">归档</h3>
    <div class="widget  widget-wrap-inn">
        <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">四月 2019</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">三月 2019</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/12/">十二月 2018</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/11/">十一月 2018</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/01/">一月 2018</a><span class="archive-list-count">1</span></li></ul>
    </div>
</div>

        
        
<div class="widget-wrap widget-list">
    <h3 class="widget-title">友情链接</h3>
    <div class="widget  widget-wrap-inn">
        <ul>
            
            <li>
                <a href="https://juejin.im/user/5bea27965188250edf4ad8b7">掘金</a>
            </li>
            
            <li>
                <a href="https://segmentfault.com/u/conardli">segmentfault</a>
            </li>
            
            <li>
                <a href="https://github.com/ConardLi">github</a>
            </li>
            
            <li>
                <a href="https://github.com/ConardLi/tpanorama">tpanorama</a>
            </li>
            
            <li>
                <a href="http://chuangzaoshi.com/">创造狮导航</a>
            </li>
            
        </ul>
    </div>
</div>

        
        
<div class="widget-wrap widget-list">
    <!-- <h3 class="widget-title">
        腾讯云专属福利
    </h3> -->
    <div class="widget">
        <a target="_blank"
            href="https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=1a3e7b07487819e129852ba7a4543262&from=console">
            <img src="/img/txy.jpg" id="txy" alt="">
        </a>
    </div>
</div>



<style>
    #txy {
        width: 280px;
        border: 5px;
    }
</style>
        
        
<div class="widget-wrap widget-list">
    <div class="widget">
        <a target="_blank" href="https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=y3kv7eoj">
            <img src="/img/aly.png" id="txy" alt="">
        </a>
    </div>
</div>



<style>
    #txy {
        width: 280px;
        border: 5px;
    }
</style>
        
        
    </div>
</aside>
                </div>
            </div>
        </div>
        <footer id="footer">
    <div class="container">
        <div class="container-inner">
            <a id="back-to-top" href="javascript:;"><i class="icon fa fa-angle-up"></i></a>
            <div class="credit">
                <h1 class="logo-wrap">
                    <a href="/" class="logo"></a>
                </h1>
                <p>&copy;
                    2019
                    ConardLi
                </p>
                <p>Powered by <a href="//hexo.io/" target="_blank">Hexo</a>. Theme by <a href="//github.com/ppoffice"
                        target="_blank">ConardLi</a></p>
                <script type="text/javascript">
                    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
                    document.write(unescape("%3Cspan id='cnzz_stat_icon_1275088352'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s22.cnzz.com/z_stat.php%3Fid%3D1275088352%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
                </script>
                <span id="busuanzi_container_site_pv" style="margin-left:50px;">
                    本站总访问量<span id="busuanzi_value_site_pv"></span>次
                </span>
                <span id="busuanzi_container_site_uv" style="margin-left:50px;">
                    本站访客数<span id="busuanzi_value_site_uv"></span>人次
                </span>
            </div>
            <div class="footer-plugins">
                
    


            </div>
        </div>
    </div>
</footer>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
        
    
    <script>
    var disqus_shortname = 'hexo-theme-hueman';
    
    
    var disqus_url = 'https://www.lisq.xyz/2019/03/12/【前端工程】前端开发者必备的nginx知识/';
    
    (function() {
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    </script>




    
        <script src="/libs/lightgallery/js/lightgallery.min.js"></script>
        <script src="/libs/lightgallery/js/lg-thumbnail.min.js"></script>
        <script src="/libs/lightgallery/js/lg-pager.min.js"></script>
        <script src="/libs/lightgallery/js/lg-autoplay.min.js"></script>
        <script src="/libs/lightgallery/js/lg-fullscreen.min.js"></script>
        <script src="/libs/lightgallery/js/lg-zoom.min.js"></script>
        <script src="/libs/lightgallery/js/lg-hash.min.js"></script>
        <script src="/libs/lightgallery/js/lg-share.min.js"></script>
        <script src="/libs/lightgallery/js/lg-video.min.js"></script>
    
    
        <script src="/libs/justified-gallery/jquery.justifiedGallery.min.js"></script>
    
    



<!-- Custom Scripts -->
<script src="/js/main.js"></script>

    </div>
</body>

</html>